<template>
	<view class="myDynamic">
		<view class="myDynamic_haber" :style="{ paddingTop: (top+30) + 'px' }">
			<tui-navigation-bar maxOpacity="0" :titleSize="18" :titleLineHeight="18" :titlefontWeight="800"
				@init="initNavigation" title="动态" backgroundColor="#fff" color="#000">
				<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
					<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<view class="myInfo">
				<view class="myInfoText">
					<view class="myInfoTitle"><text>{{userInfo&&userInfo.nickname}}</text></view>
					<view class="myInfoDeatils">
						<text>{{userInfo && userInfo.intro}}</text>
					</view>
				</view>
				<view class="haderImg">
					<image class="img" :src="userInfo && ossUrl + userInfo.avatar"></image>
				</view>
			</view>
			 <view class="myItems">
			 	<view class="item">
			 		<view class="tp"><text>{{userInfo&&userInfo.followNumber}}</text></view>
			 		<view class="bt"><text>关注</text></view>
			 	</view>
			 	<view class="item">
			 		<view class="tp"><text>{{userInfo&&userInfo.fansNumber}}</text></view>
			 		<view class="bt"><text>粉丝</text></view>
			 	</view>
			 	<view class="item">
			 		<view class="tp"><text>{{userInfo&&userInfo.likeNumber}}</text></view>
			 		<view class="bt"><text>获赞</text></view>
			 	</view>
			 	<view class="item">
			 		<view class="tp"><text>{{userInfo&&userInfo.collectNumber}}</text></view>
			 		<view class="bt"><text>收藏</text></view>
			 	</view>
			 </view>
		</view>
		 
		<view class="myDynamic_content">
			<view class="tabList">
				<view class="tabList_tab">
					<tutor-tab :list="['笔记列表','收藏列表']" @clickSwtichTab="clickSwtichTab"
						:atciveIndex="atciveIndex"></tutor-tab>
				</view>
			</view>
			<view class="content" >
				<z-paging ref="paging" :fixed="false" v-model="listData" @query="queryList"> 
					<!--笔记列表瀑布流-->
					<tui-waterfall :listData="listData" v-if="!atciveIndex">
						<template v-slot:left="{ list }">
							<DynamicItem :ossUrl="ossUrl" isDate :isComment="false" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></DynamicItem>
						</template>
						<template v-slot:right="{ list }">
							<DynamicItem :ossUrl="ossUrl" isDate :isComment="false" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></DynamicItem>
						</template>
					</tui-waterfall>
					<!--收藏列表瀑布流-->
					<tui-waterfall :listData="listData" v-else>
						<template v-slot:left="{ list }">
							<DynamicItem :ossUrl="ossUrl" isDate :isComment="false" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></DynamicItem>
						</template>
						<template v-slot:right="{ list }">
							<DynamicItem :ossUrl="ossUrl" isDate :isComment="false" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></DynamicItem>
						</template>
					</tui-waterfall>
				</z-paging>
				 
			</view>
			
		</view>
		<!-- <view class="footer">
			<tui-form-button @click="publishDynamic" dynamic radius="20rpx" size="32" color="#fff" width="690rpx" height="84rpx"
				background="#2FD7D3">
				<tui-icon name="alarm" color="#fff" :size="'42rpx'" margin="0 8rpx 0 0"></tui-icon>
				发布动态
			</tui-form-button>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	 import Cache from "@/utils/cache";
	import { myDynamicList,myCollectList,collectDynamic} from "@/http/api/dynamic/dynamic.js" 
	import { getUserDynamic} from "@/http/api/user/user.js" 
	import DynamicItem from '../../compontents/dynamicItem.vue'
	export default {
		components: { 
			DynamicItem
		},
		data() {
			return {
				ossUrl: getApp().globalData.ossurl,// 图片前缀
				userId:null,
				// 商家列表
				listData: [],
				userInfo:{},//用户详情
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				isAgreement: false,
				imgList: [],
				atciveIndex: 0, //切换笔记列表和收藏列表
			}
		},
		onLoad(options) { 
			if(options.id){
				this.userId=options.id
				this.getUserDynamicInfo(options.id)
			} 
		}, 
		methods: {
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack();
			},
			closeDrawer() {
				this.visible = false
			},
			// 动态详情
			toDynamicDetail(e) {
				let dynamicId = e.dynamicId
				uni.navigateTo({
					url: '/pages/find/modules/recommendDetails/recommendDetails?dynamicId='+dynamicId
				})
			},
			//获取当前用户动态详情
			getUserDynamicInfo(userId){
				getUserDynamic(userId).then(res=>{
					if(res.code===200){
						this.userInfo=res.data
					}
				})
			},
			examine(arr, index) {
				uni.previewImage({
					urls: arr,
					current: index
				});
			},
			//发布动态
			publishDynamic() {
				uni.navigateTo({
					url:'/pages/find/modules/pushDynamic/pushDynamic'
				})
			},
			clickSwtichTab(data) {
				this.atciveIndex = data.index
				this.$refs.paging.reload()
			},
			//加载笔记列表
			queryList(pageNo, pageSize) {
				if(!this.atciveIndex){
					myDynamicList({pageNum:pageNo,pageSize,userId:this.userId}).then(res => {
						if (res.code == 200) {
							 this.$refs.paging.complete(res.rows); 
						} else {
							this.$utils.toast(res.msg);
						}
					}).finally(()=>{
						uni.hideLoading()
					})
				}else{
					myCollectList({pageNum:pageNo,pageSize}).then(res => {
						if (res.code == 200) {
							 this.$refs.paging.complete(res.rows); 
						} else {
							 this.$utils.toast(res.msg);
						}
					}).finally(()=>{
						uni.hideLoading()
					})
				}
				 
			},
			//取消收藏
			cancelCollect(id){
				collectDynamic({id,queryType:2}).then(res => {
					if (res.code == 200) {
						 this.$refs.paging.reload()
					} else {
						 this.$utils.toast(res.msg);
					}
				}).finally(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './myDynamic.scss';
</style>